<!DOCTYPE html>
<html>
<head>
<title>My Videos</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/blitzer/jquery-ui.css" />
<style>
	body {
	    margin: 0;
	    padding: 10px 10px 0 10px;
	    font-family:Helvetica, Arial, sans-serif;
	    font-size: 12px;
	    font-weight:bold;
	    color: #333333;
	}
	
   /* superfish */
   
    .sf-menu, .sf-menu * {
        margin:			0;
        padding:		0;
        list-style:		none;
    }
    .sf-menu {
        font-size: 12px;
        line-height:	1.0;
    }
    .sf-menu ul {
        position:		absolute;
        top:			-999em;
        width:			10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
        width:			100%;
    }
    .sf-menu li:hover {
        visibility:		inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
        float:			left;
        position:		relative;
    }
    .sf-menu a {
        display:		block;
        position:		relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        left:			0;
        top:			2.5em; /* match top ul list item height */
        z-index:		99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
        top:			-999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
        left:			10em; /* match ul width */
        top:			0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
        top:			-999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
        left:			10em; /* match ul width */
        top:			0;
    }
    
    .sf-menu {
        float:			left;
        margin-bottom:	0.2em;
    }
    .sf-menu a {
        padding: .7em 1em;
        text-decoration:none;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        outline:		0;
    }
    
    /*** arrows **/
    .sf-menu a.sf-with-ul {
        padding-right: 	2.25em;
        min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
        position:		absolute;
        display:		block;
        right:			.75em;
        top:			1.05em; /* IE6 only */
        width:			10px;
        height:			10px;
        text-indent: 	-999em;
        overflow:		hidden;
        background:		url(http://madalin-games.googlecode.com/svn/trunk/css/images/sf-sub-indicator.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    }
    a > .sf-sub-indicator {  /* give all except IE6 the correct values */
        top:			.8em;
        background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
    }
    
    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
    }
    
    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
        background:	url(http://lh3.googleusercontent.com/_dC0m17rI1Gc/TZDrNkEUFLI/AAAAAAAAMQc/yvixozK0RnU/s800/shadow.png) no-repeat bottom right;
        padding: 0 8px 9px 0;
        -moz-border-radius-bottomleft: 17px;
        -moz-border-radius-topright: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
        background: transparent;
    }
   /**/
	
   /* yt-container */
    #yt-app-container {
        border:0;
    }
	#yt-container {
	    text-align: center;
	}
	#playerContainer {
	    width: 500px;
	    height: 310px;
	    margin: auto;
	}
	#videos, #favorites, #history {
	    width: 720px;
	    height: 430px;
	    overflow-y: scroll;
	    margin: auto;
	}
	ul.videos, #favorites-ul, #history-ul {
	  margin-top: 10px;
	  padding-left : 0em;
	  margin-left: 0em;
	  list-style: none;
	}
	ul.videos li, ul#favorites-ul li, ul#history-ul li {
	  float: left;
	  width: 170px;
	  height: 130px;
	  margin-bottom: 14px;
	}
	.titlec {
	    font-size: 11px;
	    display: block;
	    cursor: default;
	}
    
   /**/
	
   /* searchForm */
    #searchForm-container {
        width:265px;
        height:38px;
        margin:0 auto;
        margin-bottom:15px;
        position:relative;
        left: 200px;
    }
    #main-div-form {
        width:240px;
        position:absolute;
        margin:0;
    }
    #searchForm fieldset {
        width:240px;
        position:relative;
        display:block;
        border:0;
    }
    div.input {
        width:208px;
        padding:4px 15px 4px 15px;
        border-radius:20px;
        border:1px solid #c6d2db;
        border-top:1px solid #b4c1cb;
        box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
        float:right;
        background:#e8edf1;
    }
    div.input.focus {
        border:1px solid #9ecbe2;
        box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);
    }
    input#s {
        width:100%;
        border:0;
        border-radius:20px;
        background:transparent;
        height:16px;
        color:#b4bdc4;
        text-shadow:0 1px 1px #fff;
    }
    input#s:focus {
        outline:none
    }
    input#searchSubmit {
        width:19px;
        height:19px;
        text-indent:-9999px;
        overflow:hidden;
        background:url(http://madalin-games.googlecode.com/svn/trunk/ork/mochi/css-img/search-icon.png) no-repeat;
        border:0;
        position:absolute;
        top: 9px; 
        right: 18px;
        z-index:5;
        display:none;
        cursor:pointer;
    }
   /**/
   
   /**/
    #nav-bar .ui-widget-content, .sf-menu li.ui-state-default, .sf-menu li a, .second-ul li.ui-state-default {
        border:0;
    }
   
    .thumb {
	  cursor: pointer;
    }
   /**/
    
  /* .favorite-span, .trash-span  */
  

    
    .favorite-span, .trash-span {
        display:block; 
        height:0px; 
        width:16px; 
        position:relative; 
        top:78px; 
        left:131px; 
    }
    
    .favorite-span .ui-icon-heart, .ui-icon-trash {
        border:1px solid transparent; 
        background-color:#fff;  
        cursor: pointer; 
        
        opacity: 0.2; 
        filter: alpha(opacity = 20);
        
        -webkit-transition: opacity .3s linear;
        transition: opacity .3s linear;
        -moz-transition: opacity .3s linear;
        -o-transition: opacity .3s linear;
        
    }
    .favorite-span .ui-icon-heart:hover, .ui-icon-trash:hover {
        border:1px solid #fff; 
        
        opacity:0.8;
        filter: alpha(opacity = 80);
        
        -webkit-transition: opacity .2s linear;
        transition: opacity .2s linear;
        -moz-transition: opacity .2s linear;
        -o-transition: opacity .2s linear;
        
    }
    
    
    .ui-effects-transfer { border: 2px dotted gray; }
    

  /**/
    
    

</style>
</head>
<body>
<div id="yt-app-container" class="ui-widget-content">
    <div id="nav-bar">
        <ul class="sf-menu ui-widget-content">
          <li class="parent-li ui-state-default"><a class="ret-false" id="categories-nav" href="#">categories</a>
              <ul class="second-ul">
                <li class="ui-state-default"><a class="ret-false categ" id="Music" href="#">Music</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Sports" href="#">Sports</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Games" href="#">Games</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Comedy" href="#">Comedy</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Entertainment" href="#">Entertainment</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Tech" href="#">Tech</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Autos" href="#">Autos</a></li>
                <li class="ui-state-default"><a class="ret-false categ" id="Animals" href="#">Animals</a></li>
              </ul>
          </li>
          <li class="parent-li ui-state-default"><a class="ret-false" id="favorites-nav" href="#">favorites</a>
          </li>
          <li class="parent-li ui-state-default"><a class="ret-false" id="history-nav" href="#">history</a>
              <ul class="second-ul">
                <li class="ui-state-default"><a class="ret-false" id="clear-history" href="#">Delete history</a></li>
              </ul>
          </li>
        </ul>
    </div>
    <div id="searchForm-container">
        <div id="main-div-form">
            <form id="searchForm" action="javascript:searchVideos();">
                <fieldset id="form-fieldset">
                    <div class="input">
                        <input type="text" name="s" id="s" value="buscar" autocomplete="off" spellcheck="false" />
                    </div>
                    <input type="submit" id="searchSubmit" value="buscar" />
                </fieldset>
            </form>
        </div>
    </div>
    <div id="yt-container">
        <div id="playerContainer">
            <object id="player"></object>
        </div>
        <div id="videos"></div>
        <div id="favorites" style="display:none">
            <ul id="favorites-ul">
                <li class="placeholder"><span>No favorites yet.</span></li>
            </ul>
        </div>
        <div id="history" style="display:none">
            <ul id="history-ul">
                <li class="placeholder"><span>No history here yet.</span></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
// functions
    
    
	function loadVideo(playerUrl, autoplay) {
	  swfobject.embedSWF(
		  playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
		  (autoplay?1:0), 'player', '500', '280', '9.0.0', false, 
		  false, {allowfullscreen: 'true'});
	}
	function showMyVideos(data) {
	  var feed = data.feed;
	  var entries = feed.entry || [];
	  var html = ['<ul class="videos">'];
	  for (var i = 0; i < entries.length; i++) {
		var entry = entries[i];
		var title = entry.title.$t.substr(0, 20);
		var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
		var playerUrl = entries[i].media$group.media$content[0].url;
		html.push('<li class="videos-li"><span class="favorite-span"><span class="ui-icon ui-icon-heart"></span></span>',
		          '<img onclick="loadVideo(\'', playerUrl, '\', true)" class="thumb" src="', 
				  thumbnailUrl, '" width="130" height="97"/><span class="titlec">', title, '...</span>', '</span></li>');
	  }
	  html.push('</ul><br style="clear: left;"/>');
	  document.getElementById('videos').innerHTML = html.join('');
	  if (entries.length > 0) {
		loadVideo(entries[0].media$group.media$content[0].url, false);
	  }
	}
    function searchVideos() {
        var txt = $('input#s').val();
        var searchTerms = escape(txt);
        $.getScript('http://gdata.youtube.com/feeds/api/videos?q='+searchTerms+'&alt=json-in-script&callback=showMyVideos&start-index=1&max-results=50&v=2', function() {});
    }
    
    function updateFavorites() {
        
        var favoritesHTML = $('#favorites-ul').html();
        
        localStorage.setItem("favoritesHTML", favoritesHTML);
    }
    function getFavoriteVideos() {
        var favoritesHTMLlStorage = localStorage.getItem("favoritesHTML");
            
        if ( favoritesHTMLlStorage ) {
            $('#favorites-ul').html(favoritesHTMLlStorage);
        }
    }
    function updateHistory() {
        
        var historyHTML = $('#history-ul').html();
        
        localStorage.setItem("historyHTML", historyHTML);
    }
    function getHistoryVideos() {
        var historyHTMLlStorage = localStorage.getItem("historyHTML");
            
        if ( historyHTMLlStorage ) {
            $('#history-ul').html(historyHTMLlStorage);
        }
    }
    
    
    
//
//  superfish
    /*
     * Superfish v1.4.8 - jQuery menu widget
     * Copyright (c) 2008 Joel Birch
     *
     * Dual licensed under the MIT and GPL licenses:
     * 	http://www.opensource.org/licenses/mit-license.php
     * 	http://www.gnu.org/licenses/gpl.html
     *
     * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
     */
    
    ;(function($){
        $.fn.superfish = function(op){
    
            var sf = $.fn.superfish,
                c = sf.c,
                $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
                over = function(){
                    var $$ = $(this), menu = getMenu($$);
                    clearTimeout(menu.sfTimer);
                    $$.showSuperfishUl().siblings().hideSuperfishUl();
                },
                out = function(){
                    var $$ = $(this), menu = getMenu($$), o = sf.op;
                    clearTimeout(menu.sfTimer);
                    menu.sfTimer=setTimeout(function(){
                        o.retainPath=($.inArray($$[0],o.$path)>-1);
                        $$.hideSuperfishUl();
                        if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                    },o.delay);	
                },
                getMenu = function($menu){
                    var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                    sf.op = sf.o[menu.serial];
                    return menu;
                },
                addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
                
            return this.each(function() {
                var s = this.serial = sf.o.length;
                var o = $.extend({},sf.defaults,op);
                o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
                    $(this).addClass([o.hoverClass,c.bcClass].join(' '))
                        .filter('li:has(ul)').removeClass(o.pathClass);
                });
                sf.o[s] = sf.op = o;
                
                $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
                    if (o.autoArrows) addArrow( $('>a:first-child',this) );
                })
                .not('.'+c.bcClass)
                    .hideSuperfishUl();
                
                var $a = $('a',this);
                $a.each(function(i){
                    var $li = $a.eq(i).parents('li');
                    $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
                });
                o.onInit.call(this);
                
            }).each(function() {
                var menuClasses = [c.menuClass];
                if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
                $(this).addClass(menuClasses.join(' '));
            });
        };
    
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
            var o = sf.op;
            if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
                this.toggleClass(sf.c.shadowClass+'-off');
            };
        sf.c = {
            bcClass     : 'sf-breadcrumb',
            menuClass   : 'sf-js-enabled',
            anchorClass : 'sf-with-ul',
            arrowClass  : 'sf-sub-indicator',
            shadowClass : 'sf-shadow'
        };
        sf.defaults = {
            hoverClass	: 'sfHover',
            pathClass	: 'overideThisToUse',
            pathLevels	: 1,
            delay		: 800,
            animation	: {opacity:'show'},
            speed		: 'normal',
            autoArrows	: true,
            dropShadows : true,
            disableHI	: false,		// true disables hoverIntent detection
            onInit		: function(){}, // callback functions
            onBeforeShow: function(){},
            onShow		: function(){},
            onHide		: function(){}
        };
        $.fn.extend({
            hideSuperfishUl : function(){
                var o = sf.op,
                    not = (o.retainPath===true) ? o.$path : '';
                o.retainPath = false;
                var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
                        .find('>ul').hide().css('visibility','hidden');
                o.onHide.call($ul);
                return this;
            },
            showSuperfishUl : function(){
                var o = sf.op,
                    sh = sf.c.shadowClass+'-off',
                    $ul = this.addClass(o.hoverClass)
                        .find('>ul:hidden').css('visibility','visible');
                sf.IE7fix.call($ul);
                o.onBeforeShow.call($ul);
                $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
                return this;
            }
        });
    
    })(jQuery);
    
    
    
    //hoverIntent
    /**
    * hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
    * <http://cherne.net/brian/resources/jquery.hoverIntent.html>
    * 
    * @param  f  onMouseOver function || An object with configuration options
    * @param  g  onMouseOut function  || Nothing (use configuration options object)
    * @author    Brian Cherne brian(at)cherne(dot)net
    */
    (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery);
    
    
    /* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
     * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
     * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
     *
     * $LastChangedDate: 2007-06-19 20:25:28 -0500 (Tue, 19 Jun 2007) $
     * $Rev: 2111 $
     *
     * Version 2.1
     */
    (function($){$.fn.bgIframe=$.fn.bgiframe=function(s){if($.browser.msie&&parseInt($.browser.version)<=6){s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,src:'javascript:false;'},s||{});var prop=function(n){return n&&n.constructor==Number?n+'px':n;},html='<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block;position:absolute;z-index:-1;'+(s.opacity!==false?'filter:Alpha(Opacity=\'0\');':'')+'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+'"/>';return this.each(function(){if($('> iframe.bgiframe',this).length==0)this.insertBefore(document.createElement(html),this.firstChild);});}return this;};if(!$.browser.version)$.browser.version=navigator.userAgent.toLowerCase().match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)[1];})(jQuery);
    
    
    /*
     * Supersubs v0.2b - jQuery plugin
     * Copyright (c) 2008 Joel Birch
     *
     * Dual licensed under the MIT and GPL licenses:
     * 	http://www.opensource.org/licenses/mit-license.php
     * 	http://www.gnu.org/licenses/gpl.html
     *
     *
     * This plugin automatically adjusts submenu widths of suckerfish-style menus to that of
     * their longest list item children. If you use this, please expect bugs and report them
     * to the jQuery Google Group with the word 'Superfish' in the subject line.
     *
     */
    
    ;(function($){ // $ will refer to jQuery within this closure
    
        $.fn.supersubs = function(options){
            var opts = $.extend({}, $.fn.supersubs.defaults, options);
            // return original object to support chaining
            return this.each(function() {
                // cache selections
                var $$ = $(this);
                // support metadata
                var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
                // get the font size of menu.
                // .css('fontSize') returns various results cross-browser, so measure an em dash instead
                var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
                    'padding' : 0,
                    'position' : 'absolute',
                    'top' : '-999em',
                    'width' : 'auto'
                }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
                // remove em dash
                $('#menu-fontsize').remove();
                // cache all ul elements
                $ULs = $$.find('ul');
                // loop through each ul in menu
                $ULs.each(function(i) {	
                    // cache this ul
                    var $ul = $ULs.eq(i);
                    // get all (li) children of this ul
                    var $LIs = $ul.children();
                    // get all anchor grand-children
                    var $As = $LIs.children('a');
                    // force content to one line and save current float property
                    var liFloat = $LIs.css('white-space','nowrap').css('float');
                    // remove width restrictions and floats so elements remain vertically stacked
                    var emWidth = $ul.add($LIs).add($As).css({
                        'float' : 'none',
                        'width'	: 'auto'
                    })
                    // this ul will now be shrink-wrapped to longest li due to position:absolute
                    // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
                    .end().end()[0].clientWidth / fontsize;
                    // add more width to ensure lines don't turn over at certain sizes in various browsers
                    emWidth += o.extraWidth;
                    // restrict to at least minWidth and at most maxWidth
                    if (emWidth > o.maxWidth)		{ emWidth = o.maxWidth; }
                    else if (emWidth < o.minWidth)	{ emWidth = o.minWidth; }
                    emWidth += 'em';
                    // set ul to width in ems
                    $ul.css('width',emWidth);
                    // restore li floats to avoid IE bugs
                    // set li width to full width of this ul
                    // revert white-space to normal
                    $LIs.css({
                        'float' : liFloat,
                        'width' : '100%',
                        'white-space' : 'normal'
                    })
                    // update offset position of descendant ul to reflect new width of parent
                    .each(function(){
                        var $childUl = $('>ul',this);
                        var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
                        $childUl.css(offsetDirection,emWidth);
                    });
                });
                
            });
        };
        // expose defaults
        $.fn.supersubs.defaults = {
            minWidth		: 9,		// requires em unit.
            maxWidth		: 25,		// requires em unit.
            extraWidth		: 0			// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
        };
        
    })(jQuery); // plugin code ends
//
// document.ready
	$(function () {
	    
	   // other-start
        
        $("ul.sf-menu").supersubs({
                                    minWidth:    12,
                                    maxWidth:    27,
                                    extraWidth:  1
                                }).superfish();
        //
        
        
       //
	   
	  //  searchForm script
	    
		var input = $('input#s');
		var divInput = $('div.input');
		var width = divInput.width();
		var outerWidth = divInput.parent().width() - (divInput.outerWidth() - width) - 28;
		var submit = $('#searchSubmit');
		var txt = input.val();
		
	
		input.on('focus', function() {
			if(input.val() === txt) {
				input.val('');
			}
			$(this).animate({color: '#000'}, 300); // text color
			$(this).parent().animate({
				width: outerWidth + 'px',
				backgroundColor: '#fff', // background color
				paddingRight: '43px'
			}, 300, function() {
				if(!(input.val() === '' || input.val() === txt)) {
					if(!($.browser.msie && $.browser.version < 9)) {
						submit.fadeIn(300);
					} else {
						submit.css({display: 'block'});
					}
				}
			}).addClass('focus');
		}).on('blur', function() {
			$(this).animate({color: '#b4bdc4'}, 300); // text color
			$(this).parent().animate({
				width: width + 'px',
				backgroundColor: '#e8edf1', // background color
				paddingRight: '15px'
			}, 300, function() {
				if(input.val() === '') {
					input.val(txt)
				}
			}).removeClass('focus');
			if(!($.browser.msie && $.browser.version < 9)) {
				submit.fadeOut(100);
			} else {
				submit.css({display: 'none'});
			}
		}).keyup(function() {
			if(input.val() === '') {
				if(!($.browser.msie && $.browser.version < 9)) {
					submit.fadeOut(300);
				} else {
					submit.css({display: 'none'});
				}
			} else {
				if(!($.browser.msie && $.browser.version < 9)) {
					submit.fadeIn(300);
				} else {
					submit.css({display: 'block'});
				}
			}
		});
		
	  //
	  
	  // other-end
	    
        $('.categ').click(function() {
            var category = $(this).attr('id');
            $.getScript('http://gdata.youtube.com/feeds/api/standardfeeds/BR/top_rated_'+category+'?time=this_month&alt=json-in-script&callback=showMyVideos&start-index=1&max-results=50&v=2', function() {});
        });
        
        // favorites
        $(document).on('click', '.favorite-span', function () {
    
                    $(this).parent().clone().prependTo('#favorites-ul')
                        .prepend('<span class="trash-span"><span class="ui-icon ui-icon-trash"></span></span>');
                    
                    $('#favorites-ul').find('.favorite-span, .placeholder').remove();
                    
                    var favoritesObj = $('#favorites-ul > li');
                    var favoritesliArray = $.makeArray(favoritesObj);
                    
                    if ( favoritesliArray.length < 51 ) {
                        $(this).parent().effect('transfer', { to: '#favorites-nav', className: 'ui-effects-transfer' }, 1000);
                    } else if ( favoritesliArray.length > 50 ) {
                        $('#favorites-ul > li:first').remove();
                    }
                    updateFavorites();
                });
        //
        // delete favorite
        $(document).on('click', '.trash-span', function () {
                $( this ).parent().hide('drop', 400, function() {
                        $( this ).remove();
                        updateFavorites();
                        updateHistory();
                    });
            });
        //
        
        // history
        $(document).on('click', '.thumb', function () {
                
                    $(this).parent().clone().prependTo('#history-ul');
                    
                    $('#history-ul').find('.favorite-span, .trash-span, .placeholder').remove();
                    
                    var historyObj = $('#history-ul > li');
                    var historyliArray = $.makeArray(historyObj);
        
                    if ( historyliArray.length > 50 ) {
                        $('#history-ul > li:last').remove();
                    }
                    
                    updateHistory();
            });
        $('#clear-history').click(function() {
                localStorage.removeItem("historyHTML");
                $('#history-ul').html('<li class="placeholder"><span>No history here yet.</span></li>');
        });
        //
        
        
        $('#categories-nav, .categ').click(function(){
                $('#videos').show();
                $('#favorites').hide();
                $('#history').hide();
        });
        $('#favorites-nav').click(function(){
                $('#videos').hide();
                $('#favorites').show();
                $('#history').hide();
        });
        $('#history-nav').click(function(){
                $('#videos').hide();
                $('#favorites').hide();
                $('#history').show();
        });
        
        getFavoriteVideos();
	    getHistoryVideos();
	    
        $('.ret-false').click(function(){
                            return false;
                        });
        //
        $('#nav-bar-ts, .sf-menu li').hover(
            function() {
                $(this).addClass('ui-state-hover');
            },
            function() {
                $(this).removeClass('ui-state-hover');
            });
        //
        $('.second-ul li').mouseenter(function() {
                setTimeout(function() {$('.second-ul li').parents('li.parent-li').removeClass('ui-state-hover')}, 10);
                setTimeout(function() {$('.second-ul li').parents('li.parent-li').removeClass('ui-state-hover')}, 20);
        });
        //
        
	  //
	  
	});
//
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/BR/top_rated?time=this_month&alt=json-in-script&callback=showMyVideos&start-index=1&max-results=50&format=5">
</script>
</body>
</html>
